<template>
	<div style="background-color: #FFFFFF;">
		<top-nav bgColor="#FFFFFF" title="学校列表" btnName="主页" :rightShow="false" returnPath="上一级"></top-nav>
		<section style="height: 3rem;"></section>
		<mu-container style="border-bottom: 1px solid rgba(0,0,0,0.1);">
			<mu-row gutter>
				<mu-col>
					<mu-select v-model="idArea" style="width: 21%;font-size: 2.8vw;" @change="getVipUniversitys()">
						<mu-option v-for="areas,index in areas" :key="areas" :label="areas" :value="areas" ripple></mu-option>
					</mu-select>
					<mu-select v-model="idCategory" style="width: 21%;font-size: 2.8vw;" @change="getVipUniversitys()">
						<mu-option v-for="category,index in category" :key="category" :label="category" :value="category" ripple></mu-option>
					</mu-select>
					<mu-select v-model="idLevel" style="width: 21%;font-size: 2.8vw;" @change="getVipUniversitys()">
						<mu-option v-for="level,index in level" :key="level" :label="level" :value="level" ripple></mu-option>
					</mu-select>
					<mu-select v-model="idLearnType" style="width: 25%;font-size: 2.8vw;" @change="getVipUniversitys()">
						<mu-option v-for="learnType,index in learnType" :key="learnType" :label="learnType" :value="learnType" ripple></mu-option>
					</mu-select>
				</mu-col>
			</mu-row>
		</mu-container>
		<div id="selectPage">
			<section v-for="item in universitys" style="padding-top: 0px;padding-bottom: 0px;">
				<mu-list textline="two-line" @click="gotoVipSchool(item)">
					<mu-list-item avatar :ripple="true" button>
						<mu-list-item-action>
							<mu-avatar>
								<img v-bind:src="idSchoolImg" />
							</mu-avatar>
						</mu-list-item-action>
						<mu-list-item-content>
							<mu-list-item-title>
								<span class="schoolTitle">{{item.nameForShow}}</span>
								<div style="position: absolute;left: 78%;display: inline-block;">
									<span class="schoolTitle" style="color: rgba(0, 0, 0, .87);"> {{item.predictor}}</span>
								</div>
							</mu-list-item-title>
							<mu-list-item-sub-title>
								<div style="margin-top: 8px;">
									<div style="color: #C5C5C5;display: inline-block;">
										<span class="schoolMessage" style="color: #C4C400;">学校代码:{{item.code}}</span>
										<span class="schoolMessage">{{item.nature}}</span>
										<span class="schoolMessage">{{item.cities}}</span>
									</div>
									<div style="position: absolute;left: 74%;display: inline-block;">
										<span class="schoolMessage">模拟录取线</span>
										<div class="right-arrow" style="display: inline-block;position: relative;left: 14px;bottom: 18px;"></div>
									</div>
								</div>
							</mu-list-item-sub-title>
						</mu-list-item-content>
					</mu-list-item>
					<mu-divider></mu-divider>
				</mu-list>
			</section>
		</div>

		<!--<mu-drawer :open.sync="open" :docked="docked" right="right" width="80%">
			<section style="height: 90%;">
				<section class="RadioStyle" style="background-color:#fff;">
					<section class="selectSectionBox">
						<p class="selectSectionText">学校性质</p>
					</section>
					<input v-model="idNature" type="radio" name="fenlei" id="f1" value="公办" />
					<label for="f1">公办</label>

					<input v-model="idNature" type="radio" name="fenlei" id="f2" value="民办" />
					<label for="f2">民办</label>

					<input v-model="idNature" type="radio" name="fenlei" id="f3" value="独立学院" />
					<label for="f3">独立学院</label>
				</section>

				<section style="margin-top: 60px;width:100%; height:2px; border-bottom:1px solid #ccc; clear:both;"></section>

				<section class="RadioStyle" style="background-color:#ccc;">
					<section class="selectSectionBox" style="background-color: #FFFFFF;">
						<p class="selectSectionText">本专科</p>
					</section>
					<input v-model="idLevel" type="radio" name="cc" id="a1" value="本科" />
					<label for="a1">本科</label>

					<input v-model="idLevel" type="radio" name="cc" id="a2" value="专科" />
					<label for="a2">专科</label>
				</section>

				<section style="margin-top: 60px;width:100%; height:2px; border-bottom:1px solid #ccc; clear:both;"></section>
				<section class="RadioStyle" style="background-color:#fff;">
					<section class="selectSectionBox">
						<p class="selectSectionText">学校包含专业类别</p>
					</section>
					<input v-model="idCategory" type="radio" name="hy" id="b1" value="普通" />
					<label for="b1">普通</label>

					<input v-model="idCategory" type="radio" name="hy" id="b2" value="医学类" />
					<label for="b2">医学类</label>

					<input v-model="idCategory" type="radio" name="hy" id="b3" value="师范类" />
					<label for="b3">师范类</label>

					<input v-model="idCategory" type="radio" name="hy" id="b4" value="艺术类" />
					<label for="b4">艺术类</label>

					<input v-model="idCategory" type="radio" name="hy" id="b5" value="军警体" />
					<label for="b5">军警体</label>
				</section>-->

		<!--<section style="margin-top: 100px;width:100%; height:2px; border-bottom:1px solid #ccc; clear:both;"></section>-->
		<!--<section class="RadioStyle" style="background-color:#ccc;">
					<section class="selectSectionBox" style="background-color: #FFFFFF;">
						<p class="selectSectionText">学校所在地区</p>
					</section>
					<input v-model="idArea" type="radio" name="diqu" id="c1" value="全部" />
					<label for="c1">全部</label>

					<input v-model="idArea" type="radio" name="diqu" id="c2" value="济南" />
					<label for="c2">济南</label>

					<input v-model="idArea" type="radio" name="diqu" id="c3" value="沿海" />
					<label for="c3">沿海</label>

					<input v-model="idArea" type="radio" name="diqu" id="c4" value="鲁中" />
					<label for="c4">鲁中</label>

					<input v-model="idArea" type="radio" name="diqu" id="c5" value="鲁西南" />
					<label for="c5">鲁西南</label>

					<input v-model="idArea" type="radio" name="diqu" id="c6" value="鲁西北" />
					<label for="c6">鲁西北</label>
				</section>-->

		<!--<section style="margin-top: 60px;width:100%; height:2px; border-bottom:1px solid #ccc; clear:both;"></section>-->
		<!--<section class="RadioStyle" style="background-color:#ccc;">
					<section class="selectSectionBox" style="background-color: #FFFFFF;">
						<p class="selectSectionText">专业性质</p>
					</section>
					<input v-model="idLearnType" type="radio" name="zy" id="e1" value="普通" />
					<label for="e1">普通</label>

					<input v-model="idLearnType" type="radio" name="zy" id="e2" value="校企合作" />
					<label for="e2">校企合作</label>

					<input v-model="idLearnType" type="radio" name="zy" id="e3" value="中外合作" />
					<label for="e3">中外合作</label>

					<input v-model="idLearnType" type="radio" name="zy" id="e4" value="3+2连读" />
					<label for="e4">3+2连读</label>

					<input v-model="idLearnType" type="radio" name="zy" id="e5" value="春考" />
					<label for="e5">春考</label>

					<input v-model="idLearnType" type="radio" name="zy" id="e6" value="艺术" />
					<label for="e6">艺术</label>
				</section>
			</section>
			<mu-button color="primary" @click="closeSearch()">
				确定
			</mu-button>
		</mu-drawer>-->

	</div>
</template>

<script>
	var storage = window.localStorage;
	export default {
		data() {
			return {
				areas: [
					'济南', '鲁西北', '鲁中', '西南', '华北',
					'鲁西南', '华东', '沿海', '东北', '西北', '华中', '华南'
				],
				category: [
					'普通', '医学类', '艺术类', '春考类',
					'师范类', '军警体'
				],
				level: [
					'本科', '专科',
				],
				learnType: [
					'普通', '校企合作', '中外合作', '3+2连续', '艺术',
					'春考',
				],
				docked: false,
				open: false,
				idSchoolImg: "../../static/images/touxiang4.jpg ",
				idNature: "公办",
				idLevel: "本科",
				idCategory: "普通",
				idArea: "全部",
				idWenlike: "理科",
				idLearnType: "普通",
				idProvince: "",
				idRegion: "全部",
				idCity: "全部",
				isShandong: "",
				universitys: [
					//				{
					//						id: 1,
					//						code: "A2A2",
					//						name: "山东科技大学",
					//						predictor: 510.5,
					//						cities: "青岛"
					//
					//					},
					//					{
					//						id: 2,
					//						code: "B2B2",
					//						name: "山东大学",
					//						predictor: 610.5,
					//						cities: "济南"
					//					}
				],
			};
		},
		mounted() {
			this.idNature = storage["idNature"]
			this.idCategory = storage["idCategory"]
			this.idLevel = storage["idLevel"]
			this.idLearnType = storage["idLearnType"]
			this.isShandong = storage["isShandong"]
			this.idProvince = storage["idProvince"]
			this.idArea = storage["idArea"]
			this.getVipUniversitys()
		},
		methods: {
			gotoVipSchool(school) {
				this.$router.push({
					name: 'vip_schoolPage',
					params: {
						schoolImg: this.idSchoolImg,
						name: school.name,
						code: school.code,
						nature: school.nature,
						city: school.cities,
						level: this.idLevel,
						wenlike: this.idWenlike,
						category: this.idCategory,
						learnType: this.idLearnType,
					}
				})
			},
			closeSearch() {
				this.open = !this.open
				this.getVipUniversitys()
			},
			getVipUniversitys() {
				let that = this
				//				storage.setItem("idArea",this.idArea)
				//				storage.setItem("idCategory",this.idCategory)
				//				storage.setItem("idLevel",this.idLevel)
				//				storage.setItem("idLearnType",this.idLearnType)
				//				storage.setItem("idLearnType",this.idLearnType)
				var search = {
					idNature: this.idNature,
					idLevel: this.idLevel,
					idCategory: this.idCategory,
					idArea: this.idArea,
					idWenlike: this.idWenlike,
					idLearnType: this.idLearnType,
					province: this.idProvince,
					isShandong: this.isShandong
				}
				that.axios.post('gaokao-api/api/vip/getVipUniversitys', search).then(
					function(response) {
						console.log(response)
						that.universitys = response.data.universitys
					}).catch(
					function(error) {
						console.log(error)
					})
			},
		},
	};
</script>
<style scoped="scoped">
	.selectSectionBox {
		border-left: 6px solid deepskyblue;
	}
	
	.selectSectionText {
		padding-left: 10px;
		text-align: left;
		font-weight: 600;
		font-size: 15px;
	}
	
	#selectPage ul {
		padding: 0px;
	}
	
	.schoolTitle {
		font-weight: 500;
	}
	
	.schoolMessage {
		font-size: 3.0vw;
	}
	/*-单选框手机样式*/
	
	.RadioStyle {
		background-color: #F9F9F9;
		width: 100%;
	}
	
	.RadioStyle input {
		display: none;
	}
	
	.RadioStyle label {
		border: 1px solid #00a4ff;
		padding: 2px 10px 2px 5px;
		line-height: 28px;
		min-width: 90px;
		text-align: center;
		float: left;
		margin: 2px;
		border-radius: 4px;
	}
	
	.RadioStyle input:checked+label {
		background: url(../../static/images/ico_checkon.svg) no-repeat right bottom;
		background-size: 21px 21px;
		color: #00a4ff
	}
	
	.right-arrow {
		width: 10px;
		height: 10px;
		border-top: 1px solid rgb(0, 0, 0, 0.4);
		border-right: 1px solid rgb(0, 0, 0, 0.4);
		transform: rotate(45deg);
	}
</style>